<template>
  <nav class="nav-menu">
    <h3 class="menu-title">分类</h3>
    <ul>
      <li 
        v-for="item in menuStore.menuItems" 
        :key="item.id"
        :class="{ active: menuStore.activeItemId === item.id }"
        @click="handleMenuClick(item)"
      >
        <i :class="item.icon"></i>
        {{ item.text }}
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { useMenuStore } from '../stores/useMenuStore'
import { useUserStore } from '../stores/userStore'
import { useRouter } from 'vue-router'

const menuStore = useMenuStore()
const userStore = useUserStore()
const router = useRouter()

const handleMenuClick = (item) => {
  // 如果是"全部"菜单项或用户已登录，正常切换
  if (item.id === 'all' || userStore.isLogin) {
    menuStore.setActiveItem(item.id)
    return
  }
  
  // 未登录用户点击其他菜单项
  alert('请先登录后再使用此功能')
  router.push('/login')
}
</script>

<style scoped>
.nav-menu {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.menu-title {
  font-size: 16px;
  color: var(--text-color);
  margin-bottom: 16px;
  padding-left: 16px;
  font-weight: 500;
}

.nav-menu:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-menu li {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--text-color);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-menu li:hover {
  background: var(--hover-color);
  color: var(--primary-color);
}

.nav-menu li.active {
  background: var(--primary-color);
  color: white;
}

.nav-menu li i {
  margin-right: 12px;
  width: 16px;
  text-align: center;
}

/* 添加容器的悬浮效果 */
.nav-menu:hover {
  transform: translateY(-2px);
}

/* 未登录状态下的菜单项样式 */
.nav-menu li:not(.active):not(:first-child):not(:hover) {
  opacity: 0.8;
}
</style> 